<template>
  <div class="login">
    <!-- header -->
    <van-nav-bar title="原神玩家请登录" left-text="返回" left-arrow @click-left="()=>{
      $router.push(this.$route.query.backUrl || '/')
    }" />
    <div class="container">
      <div class="title">
        <h3>手机号登录</h3>
        <p>未注册的手机号登录后将自动注册</p>
      </div>
      <!-- <van-form @click="login"> -->
      <van-field v-model="phone" center type="digit" name="手机号" label="手机号" placeholder="请输入手机号" />
      <van-field v-model="picCode" center name="图形验证码" label="图形验证码" placeholder="图形验证码">
        <template #button>
          <van-image v-if="pic.base64" :src="pic.base64" alt="验证码" height="45px" width="85px"
            @click="getPicCode"></van-image>
          <van-loading v-else size="24">加载中...</van-loading>
          <!-- <img v-if="pic.base64" :src="pic.base64" alt="验证码" height="45px" width="85px" @click="getPicCode"> -->
        </template>
      </van-field>
      <van-field v-model="code" center name="验证码" label="验证码" placeholder="输入验证码">
        <template #button>
          <van-button v-if="second === totalSecond" size="small" type="primary" @click="sendmsg">发送验证码</van-button>
          <span v-else @click="warning">{{ second + "s后重新发送" }}</span>
        </template>
      </van-field>
      <div style="background-color: transparent;">
        <van-button round block type="info" @click="login">登录</van-button>
      </div>
      <!-- </van-form> -->
    </div>
  </div>
</template>

<script>
import { getPicCode, getCode, codeLogin } from '@/api/login'
export default {
  name: 'LoginIndex',
  data () {
    return {
      phone: '',
      picCode: '',
      pic: {
        base64: '',
        key: ''
      },
      code: '',
      totalSecond: 60,
      second: 60,
      timer: null
    }
  },
  mounted () {
    this.getPicCode()
  },
  beforeDestroy () {
    clearInterval(this.timer)
  },
  methods: {
    async getPicCode () {
      this.pic.base64 = ''
      this.pic.key = ''
      const res = await getPicCode()
      this.pic.base64 = res.data.base64
      this.pic.key = res.data.key
      console.log(this.pic)
    },
    ValidCheck () {
      // console.log(this.phone, this.picCode)
      if (!/^1[3-9]\d{9}$/.test(this.phone)) {
        this.$toast.fail('手机号错误')
        return false
      }
      if (!/^\w{4}$/.test(this.picCode)) {
        this.$toast.fail('图形验证码错误')
        return false
      }
      return true
    },
    async sendmsg () {
      if (!this.ValidCheck()) { return }
      // 获取短信嘛
      if (this.second === this.totalSecond && !this.timer) {
        // 后端应该给出不同响应码 =200 为成功
        try {
          const res = await getCode(this.picCode, this.pic.key, this.phone)
          this.$toast.success(res)
          // 开始倒计时
          this.timer = setInterval(() => {
            this.second--
            // console.log(this.second)
            if (this.second < 1) {
              this.second = this.totalSecond
              clearInterval(this.timer)
              this.timer = null
            }
          }, 1000)
        } catch (e) {
          // this.$toast.fail(e)
          console.error(e)
        }
      }
    },
    warning () {
      this.$toast.fail('请稍后再试')
    },
    async login () {
      if (!this.ValidCheck()) { return }
      if (!/^\d{6}$/.test(this.code)) {
        this.$toast('请输入正确的手机验证码')
        return
      }
      try {
        const res = await codeLogin(this.phone, this.code)
        console.log(res.data)
        // 登录成功存入vuex用户信息
        if (res.data) {
          this.$store.commit('user/setUserInfo', res.data)
          this.$router.replace(this.$route.query.backUrl || '/')
          this.$toast.success(res.message)
        }
      } catch (e) {
        console.error('登录失败：', e)
        // this.$toast.fail(e)
      }
    }
  }
}
</script>

<style lang="less" scoped>
.login {
  .container {
    padding: 49px 29px;

    .title {
      margin-bottom: 20px;

      h3 {
        font-size: 26px;
        font-weight: normal;
      }

      p {
        line-height: 40px;
        font-size: 14px;
        color: #b8b8b8;
      }
    }
  }

}
</style>
